<template>
    <div>
        <div class="table">
            <el-input v-model="courseName" class="course-name" placeholder="课程名称" />
            <el-select v-model="coach" class="m-2 course-name" placeholder="请选择课程教练">
               <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
               />
            </el-select>
            <el-button type="primary" class="search">查询</el-button>
            <el-button text @click="dialogFormVisible = true" class="search add1">添加团课</el-button>
        </div>
        <div class="table">
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="" label="课程图片" width="150">
                    <!-- <template >
                        <el-image style="width: 100px; height: 100px" :src="courseImg" />

                    </template> -->
                    <template #default="scope">
                        <!-- <el-image :src="'http://localhost:8888/'+scope.row.courseImg"/> -->
                        <el-image :src="scope.row.courseImg"/>
                    </template>
                </el-table-column>
                <el-table-column prop="courseName" label="课程名称" width="200" />
                <el-table-column prop="myCoach" label="教练" />
                <el-table-column prop="order" label="排序" />
                <el-table-column prop="time" label="时长" />
                <el-table-column prop="appointment" label="可预约人数" />
                <el-table-column fixed="right" label="操作" >
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click="changeInfo(scope.row)"
                        >编辑</el-button
                        >
                        <el-button link type="primary" size="small">会员卡</el-button>
                        <el-button link type="primary" size="small"  @click="deleteInfo(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pages-box">
            <el-pagination background layout="prev, pager, next" :total="50"/>
        </div>

        <!-- 添加团课 -->
        <div>
            <el-dialog v-model="dialogFormVisible" title="添加团课">
                <el-form :model="form" class="addBox">
                    <el-form-item label="团课名称" :label-width="formLabelWidth">
                        <el-input v-model="form.courseName" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="添加图片" :label-width="formLabelWidth">
                        <el-upload action="#" list-type="picture-card" :auto-upload="false">
                            <el-icon>+</el-icon>

                            <template #file="{ file }">
                            <div>
                                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                                <span class="el-upload-list__item-actions">
                                <span
                                    class="el-upload-list__item-preview"
                                    @click="handlePictureCardPreview(file)"
                                >
                                    <el-icon>查看</el-icon>
                                </span>
                                <span
                                    v-if="!disabled"
                                    class="el-upload-list__item-delete"
                                    @click="handleDownload(file)"
                                >
                                    <el-icon>拿值</el-icon>
                                </span>
                                <span
                                    v-if="!disabled"
                                    class="el-upload-list__item-delete"
                                    @click="handleRemove(file)"
                                >
                                    <el-icon>删除</el-icon>
                                </span>
                                </span>
                            </div>
                            </template>
                        </el-upload>

                        <el-dialog v-model="dialogVisible">
                            <img w-full :src="dialogImageUrl" alt="Preview Image" />
                        </el-dialog>
                    </el-form-item>

                    <el-form-item label="教练" :label-width="formLabelWidth">
                        <el-select v-model="form.myCoach" placeholder="请选择教练">
                        <el-option label="大明" value="大明" />
                        <el-option label="彭于晏" value="彭于晏" />
                        <el-option label="李四" value="李四" />
                        <el-option label="王五" value="王五" />
                        <el-option label="小李" value="小李" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="排序" :label-width="formLabelWidth">
                        <el-input v-model="form.order" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="时长" :label-width="formLabelWidth">
                        <el-input v-model="form.time" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="可预约人数" :label-width="formLabelWidth">
                        <el-input v-model="form.appointment" autocomplete="off" />
                    </el-form-item>
                </el-form>
                <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="addInfo">确定</el-button>
                </span>
                </template>
            </el-dialog>
        </div>
    
    </div>

    
    

</template>

<script lang="ts">
import { defineComponent,ref, reactive } from 'vue';
import {useStore} from 'vuex'
import {useRouter} from 'vue-router'
import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue'
import type { UploadFile } from 'element-plus'



export default defineComponent({
    name: "LeagueLecture",
    setup(){
        
        const courseName=ref('')
        const coach=ref('')
        const options = [
            {
              value: '大明',
              label: '大明',
            },
            {
              value: '彭于晏',
              label: '彭于晏',
            },
            {
              value: '李四',
              label: '李四',
            },
            {
              value: '王五',
              label: '王五',
            },
            {
              value: '小李',
              label: '小李',
            },
            {
              value: '海蒂',
              label: '海蒂',
            }
        ]
        //添加团课
        const dialogFormVisible = ref(false)
        const formLabelWidth = '150px'
        //添加团课表单
        const form = reactive({
        courseName: '',
        myCoach: '',
        order:0,
        time: '',
        appointment: 0,
        delivery: false,
        type: [],
        })

        

        const store=useStore();//调用useStore获取store
        const router=useRouter();//获取路由对象

        // const tableData=computed(()=>{
        //     return store.getters.allTableData
        // })
        const tableData =store.state.course1State.tableData

        //点击确定添加团课内容
        function addInfo(){
            //console.log(form.courseName,form.myCoach,form.time,form.appointment)
            tableData.push({courseName:form.courseName,order:form.order,myCoach:form.myCoach,time:form.time,appointment:form.appointment})
        }
       
        // onBeforeMount(() => {
        //     //console.log(axios)
        //     axios.get("/leaguelecture.do")
        //     .then(res=>{
        //         //console.log(res.data)
        //         store.dispatch("setCourseTableList",res.data)
        //     })
        // })
       
         //点击编辑
        function changeInfo(row:any){
            //console.log(row.id)
            router.push({
                path:"/ChangeCourseInfo",
                query:{id:row.id}
            })
            
        }

        //点击删除
        function deleteInfo(row:any){
            //console.log(row.id)
            //console.log(row)
            for(let i=0;i<tableData.length;i++){
                if(tableData[i].id == row.id){
                    tableData.splice(i,1)
                }
            }
        }
        //上传图片
        const dialogImageUrl = ref('')
        const dialogVisible = ref(false)
        const disabled = ref(false)

        const handleRemove = (file: UploadFile) => {
            console.log(file)
        }

        const handlePictureCardPreview = (file: UploadFile) => {
            dialogImageUrl.value = file.url!
            dialogVisible.value = true
        }

        const handleDownload = (file: UploadFile) => {
            console.log(file)
        }
            
        
        return{
            courseName,
            coach,
            options,
            tableData,
            changeInfo,
            deleteInfo,
            //添加
            dialogFormVisible,
            formLabelWidth,
            form,
            //点击确定按钮
            addInfo,
            //上传图片
            dialogImageUrl,
            dialogVisible,
            disabled,
            handleRemove,
            handlePictureCardPreview,
            handleDownload


        }
    }

})
</script>

<style scoped>
    .el-select {
        width: 400px;
    }
    .el-input {
        width: 400px;
    }
    /* 课程名称查询 */
    .course-name{
        width:180px;
        margin-right:10px;
    }
    .m-2{
        margin-right:10px;
    }
    /* 查询按钮 */
    .search{
        width:100px;
    }
    .add1{
        background-color:white;
    }
    .table{
        padding:10px 20px;
    }
    /* 分页 */
    .pages-box{
        padding:10px 20px;
        display: flex;
        justify-content: right;
    }



</style>